{% extends layout_template %}
{% block content %}
<div class="page-sections-main" data-len="{{html_list | length}}">
    {% for item in html_list %}
    <div class="section-item" id="{{item.section}}">{{item.template}}</div>
    {% endfor %}
</div>
<div class="page-loader">
    <img alt="loader" class="lazyload" data-src="/assets/go1_cms/images/{% if device_type == " Mobile" %}zoomloader{% else %}product-loading{% endif %}.gif">
</div>
{% if custom_css %}
{{ custom_css }}
{% endif %}
<style type="text/css">
.page-loader {
    display: none;
    text-align: center;
    padding: 10px;
}
{% if p_route %}
{% if theme_settings.site_layout and theme_settings.site_layout=='Full Width' %}
    .{{p_route}}{
        width:100%;
        {% if theme_settings.body_background_color %}
            background:{{theme_settings.body_background_color}};   
        {% endif %}
    }
    {%if theme_settings.container_width %}
        .{{p_route}} .page-sections-main{
            width:{{theme_settings.container_width}};
        }
    {% endif %}
{% endif %}
{% if theme_settings.site_layout and theme_settings.site_layout=='Boxed' %}
    .{{p_route}}{
        width:100%;
        {% if theme_settings.body_background_color %}
            background:{{theme_settings.body_background_color}};   
        {% endif %}
        {% if theme_settings.border_color %}
            border:2px solid {{theme_settings.border_color}}; 
        {% endif %}  
    }
    {%if theme_settings.boxed_container_width %}
        .{{p_route}} .page-sections-main{
            margin: auto;
            width:{{theme_settings.boxed_container_width}};
            {% if theme_settings.boxed_background_color %}
                background:{{theme_settings.boxed_background_color}};   
            {% endif %} 
        }
    {% endif %}
{% endif %}
{% endif %}
</style>
{% endblock %}
{% block script %}
{% if js_list %}
{{ js_list }}
{% endif %}
{% if custom_js %}
{{ custom_js }}
{% endif %}
<!-- <script>

</script> -->
<script type="text/javascript">
//  console.log("hiiiii")
var page = 0;
var page_len = 3;
var allow_scroll = true;
let stop_scroll = false;
let query_params = window.location.href.split('?')[1];
let add_info = {};
if(query_params && query_params != "") {
    let query_splits = query_params.split('&');
    $(query_splits).each(function(k, v) {
        add_info[v.split('=')[0]] = v.split('=')[1];
    })
}
var body_scroll = true
$(window).scroll(function() {
   body_scroll = false
    if (allow_scroll == true) {
        var hT = $('.page-sections-main').offset().top,
            hH = $('.page-sections-main').outerHeight(),
            wH = $(window).height(),
            wS = $(this).scrollTop();
        if (wS > ((hT + hH - wH) - 500)) {
            if (stop_scroll == false) {
                $('.page-loader').show();
            } else {
                return;
            }
        } else {
            return;
        }
        allow_scroll = false;
        page = page + 1;
        console.log('{{csrf_token}}')
        $.ajax({

            type: 'POST',
            Accept: 'application/json',
            ContentType: 'application/json;charset=utf-8',
            url: window.location.origin + '/api/method/go1_cms.go1_cms.doctype.web_page_builder.web_page_builder.get_scroll_content',
            data: { 'page_no': page, 'page_len': page_len, 'page': '{{doc.name}}', 'device_type': '{{device_type}}', 'add_info': add_info },
            dataType: "json",
            headers: {
                'X-Frappe-CSRF-Token': '{{csrf_token}}'
            },
            success: function(data) {
                $('.page-loader').hide();
                if (data.message && data.message.length > 0) {
                    allow_scroll = true;
                    $(data.message).each(function(k, v) {
                        $('.page-sections-main').append(`<div id="${v.section}" class="section-item">${v.template}</div>`);
                    })
                } else {
                    allow_scroll = false;
                    stop_scroll = true;
                }
            }
        })
    }
})
if(body_scroll){
$('body').scroll(function(){
    if (allow_scroll == true) {
        var hT = $('.page-sections-main').offset().top,
            hH = $('.page-sections-main').outerHeight(),
            wH = $(window).height(),
            wS = $(this).scrollTop();
             
           
        if (wS > ((hT + hH - wH) - 500)) {
            if (stop_scroll == false) {
                $('.page-loader').show();
            } else {
                return;
            }
        } else {
            return;
        }
        allow_scroll = false;
        page = page + 1;
       
        $.ajax({
            type: 'POST',
            Accept: 'application/json',
            ContentType: 'application/json;charset=utf-8',
            url: window.location.origin + '/api/method/go1_cms.go1_cms.doctype.web_page_builder.web_page_builder.get_scroll_content',
            data: { 'page_no': page, 'page_len': page_len, 'page': '{{doc.name}}', 'device_type': '{{device_type}}', 'add_info': add_info },
            dataType: "json",
            headers: {
                'X-Frappe-CSRF-Token': '{{csrf_token}}'
            },
            success: function(data) {
               
                $('.page-loader').hide();
                if (data.message && data.message.length > 0) {
                    allow_scroll = true;
                    $(data.message).each(function(k, v) {
                        $('.page-sections-main').append(`<div id="${v.section}" class="section-item">${v.template}</div>`);
                    })
                } else {
                    allow_scroll = false;
                    stop_scroll = true;
                }
            }
        })
    }
})
}
</script>
{% endblock %}